<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Tree 형 내비게이션 </title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
body {
	margin:20px auto;
	padding:0;	
	width:200px;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
}
ul#navi {
	width:200px; 
	text-indent:10px;
}

ul#navi, ul#navi ul {
	list-style:none;
	margin:0px;
	padding:0px;
}

li.group {
	margin-bottom:3px;
}

div.title {
	height:35px;
	line-height:3;
	background:#9AB92E;
	cursor:pointer;
}
			
			
			
ul.sub li{
	height:35px;
	margin-bottom:2px;
	line-height:3;
	background:#FDF6DD;
	cursor:pointer;
}

ul.sub li a{
	text-decoration:none;
	display:block;
	width:100%;
	hiehgt:100%;
	color:#000;
}
			
ul.sub li:hover{	background:#CCFF00;	}
</style>
</head>

<body>


<ul id="navi">
     <li class="group">
         <div class="title"> Title 1 </div>
         <ul class="sub">
           <li><a href="#"> sub1 </a></li> 
           <li><a href="#"> sub1 </a></li> 
           <li><a href="#"> sub1 </a></li> 
         </ul>
     </li>  
     <li class="group">
         <div class="title"> Title 2 </div>
         <ul class="sub">
           <li><a href="#"> sub1 </a></li>            
         </ul>
     </li>
     <li class="group">
         <div class="title"> Title 3 </div>
         <ul class="sub">
           <li><a href="#"> sub1 </a></li>  
           <li><a href="#"> sub1 </a></li>  
         </ul>
     </li>    
</ul>


<!---------- jQuery code Start ---------->
<script>

 $(".sub").hide();

 $("div.title").click(function(e) {
	$(".sub").hide();
    $(this).next().show();	
 });
  
</script>
</body>
</html>







